<template>
    <div class="app-container-echart">
        <div class="chart" style="height:300px;width:100%;" />
    </div>
</template>
  
<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import resize from '@/views/dashboard/components/mixins/resize'

export default {
    mixins: [resize],
    data() {
        return {
            chart: null
        }
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                this.initChart();
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$el, 'macarons')
            this.setOptions(['2019年', '2020年', '2021年', '2022年', '2023年'],
                [5, 36, 10, 20, 15])
        },
        setOptions(times, datas) {
            this.chart.setOption({
                title: {
                    text: '部门题库新增数',
                    left:'center'
                },
                tooltip: {
                    trigger: "axis",
                    formatter: function (params) {
                        return params[0].axisValue + "<br/>" + "新增：" + params[0].value;
                    },
                    // show: true,d
                    // backgroundColor: '#fff',
                    // textStyle: {
                    //     fontSize: 12,
                    //     color: '#152934',
                    //     lineHeight: 50
                    // },
                },
                grid: {
                    left: "2%",
                    right: "10",
                    top: "15%",
                    bottom: "2%",
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    name: '',
                    data: times,
                    // axisTick: {
                    //     show: false,
                    // },
                    nameTextStyle: {
                        color: '#2683CB',
                        fontSize:'14',
                        fontWeight: '400',
                        padding:[0,0,0,-35]
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#1F8BC6',
                            width:1,
                            opacity:0.3
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#2683CB',
                            fontSize:'14',
                            fontWeight: '400',
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    name : '数量',
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#1F8BC6',
                            width:1,
                            opacity: 0.3
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#2683CB',
                            fontSize:'14',
                            fontWeight: '400',
                        }
                    },
                    nameTextStyle: {
                        color: '#2583CB',
                        fontSize:'14',
                        fontWeight: '400',
                        padding:[0,40,0,0]
                    },
                    axisLine:{
                        show: false
                    }
                },
                series: {
                    data: datas,
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#4090FB', //改变折线颜色
                        width: 3,
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#4090FB',
                            borderWidth:2//拐点边框大小
                        }
                    }
                }
            })
        }
    }
}
</script>
  